<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';

const canvasRef = useTemplateRef<HTMLCanvasElement>('flag');

onMounted(() => {
    const canvas = canvasRef.value!;
    const cssWidth = canvas.offsetWidth;
    const whR = 3 / 2;

    canvas.width = cssWidth;
    canvas.height = cssWidth / whR;

    const ctx = canvas.getContext('2d')!;

    // 红色旗面
    ctx.fillStyle = '#DE2910';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 逻辑网格：
    const logicW = 15;
    const ceilWidth = canvas.width / 2 / logicW; // 每格像素

    // // 显示网格
    // ctx.strokeStyle = '#000';
    // ctx.lineWidth = 1;
    // for (let i = 1; i <= logicW / whR; i++) {
    //     ctx.beginPath();
    //     ctx.moveTo(0, i * ceilWidth);
    //     ctx.lineTo(canvas.width, i * ceilWidth);
    //     ctx.stroke();
    // }
    //
    // for (let i = 1; i <= logicW; i++) {
    //     ctx.beginPath();
    //     ctx.moveTo(i * ceilWidth, 0);
    //     ctx.lineTo(i * ceilWidth, canvas.height);
    //     ctx.stroke();
    // }

    function logicToPixel(lx: number, ly: number) {
        return { x: lx * ceilWidth, y: ly * ceilWidth };
    }

    // 画五角星（逻辑坐标）
    function drawStar(lx: number, ly: number, lr: number, rotate: number) {
        const { x, y } = logicToPixel(lx, ly);
        const r = lr * ceilWidth;
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(rotate);
        ctx.beginPath();
        const out = r;
        const inn = r * 0.381966;
        for (let i = 0; i < 5; i++) {
            const outerAngle = (i * 2 * Math.PI) / 5 - Math.PI / 2;
            const innerAngle = ((i + 0.5) * 2 * Math.PI) / 5 - Math.PI / 2;
            const xo = out * Math.cos(outerAngle);
            const yo = out * Math.sin(outerAngle);
            const xi = inn * Math.cos(innerAngle);
            const yi = inn * Math.sin(innerAngle);
            if (i === 0) ctx.moveTo(xo, yo);
            else ctx.lineTo(xo, yo);
            ctx.lineTo(xi, yi);
        }
        ctx.closePath();
        ctx.fillStyle = '#FFDE00';
        ctx.fill();
        ctx.restore();
    }

    // 大星
    const bigX = 5;
    const bigY = 5;
    const bigR = 3;
    drawStar(bigX, bigY, bigR, 0);

    // 小星：坐标 + 旋转角（星尖指向大星中心）
    const smallStars = [
        {
            x: 10,
            y: 2,
            r: 1,
            ang: Math.atan2(bigY - 2, bigX - 10) + Math.PI / 2,
        },
        {
            x: 12,
            y: 4,
            r: 1,
            ang: Math.atan2(bigY - 4, bigX - 12) + Math.PI / 2,
        },
        {
            x: 12,
            y: 7,
            r: 1,
            ang: Math.atan2(bigY - 7, bigX - 12) + Math.PI / 2,
        },
        {
            x: 10,
            y: 9,
            r: 1,
            ang: Math.atan2(bigY - 9, bigX - 10) + Math.PI / 2,
        },
    ];

    for (const s of smallStars) {
        drawStar(s.x, s.y, s.r, s.ang);
        // 五角星之间的连线
        // ctx.beginPath();
        // ctx.moveTo(s.x * ceilWidth, s.y * ceilWidth);
        // ctx.lineTo(5 * ceilWidth, 5 * ceilWidth);
        // ctx.stroke();
    }
});
</script>

<template>
    <canvas ref="flag"></canvas>
</template>

<style scoped lang="scss">
canvas {
    width: 100%;
}
</style>
